<template>
  <div class="group">
    <div
      class="chart-container"
      @mouseenter="comMouseEnter"
      @mouseleave="hideContent"
    >
      <div class="title">
        <div class="title-h2" @click="emit('click-Computer')">
          <h2 style="font-weight: 400">
            计算机网
            <div class="red-dot red-position"></div>
          </h2>
        </div>
        <div>
          <!-- <VerticalCarousel :image-urls="'static/iconjsjw.png'" /> -->
        </div>
      </div>
      <div class="Content" :class="{ 'content-visible': showContent }">
        <div class="Content-item" @click="togglePopup('computer', 1)">
          <h4>交换机</h4>
          <div
            style="z-index: 1001"
            ref="chartRefo"
            class="chart-containers"
          ></div>
        </div>
        <div class="Content-item" @click="togglePopup('computer', 2)">
          <h4>路由器</h4>
          <div
            style="z-index: 1002"
            ref="chartReft"
            class="chart-containers"
          ></div>
        </div>
        <div class="Content-item">
          <h4 style="cursor: pointer" @click="emit('click-server')">
            服务器
            <div
              class="red-dot red-position-child"
              @click="emit('go-handleNodeSelected')"
            ></div>
          </h4>
          <div
            style="z-index: 1003"
            ref="chartRefth"
            class="chart-containers"
          ></div>
        </div>
      </div>
    </div>
    <div
      class="chart-container"
      @mouseenter="dongLiMouseEnter"
      @mouseleave="dongLiMouseLeave"
    >
      <div class="title">
        <div class="title-h2" @click="emit('click-equipment')">
          <h2 style="font-weight: 400">动环设备</h2>
        </div>
      </div>
      <div class="Content" :class="{ 'content-visible': showContentTuo }">
        <div class="Content-item">
          <h4>环境监控</h4>
          <!-- <div class="huanJing-box">
            <div class="huanJing-title-1">当前<br>温度</div>
            <div class="huanJing-title"><img style="width: 35px;height: 35px;" src="/static/空气温度.png" alt="">
            </div>
            <div class="huanJing-content">
              <div class="progress-container">
                <div class="progress-bar" style="width: 32%; background: linear-gradient(to right, #ff6b6b, #edc951);">
                </div>
                <div class="progress-percentage">32C°</div>
              </div>
            </div>
          </div>
          <div class="huanJing-box">
            <div class="huanJing-title-1">当前<br>湿度</div>
            <div class="huanJing-title"><img style="width: 35px;height: 35px;" src="/static/空气湿度.png" alt=""></div>
            <div class="huanJing-content">
              <div class="progress-container">
                <div class="progress-bar" style="width: 55%; background: linear-gradient(to right, #0004fc, #51afed);">
                </div>
                <div class="progress-percentage">55%</div>
              </div>
            </div>
          </div>
          <div class="huanJing-box">
            <div class="huanJing-title-1">当前<br>粉尘</div>
            <div class="huanJing-title"><img style="width: 35px;height: 35px;" src="/static/空气质量.png" alt=""></div>
            <div class="huanJing-content">
              <div class="progress-container">
                <div class="progress-bar" style="width: 75%; background: linear-gradient(to right, #979797, #ffffff);">
                </div>
                <div style="color: #000000" class="progress-percentage">2460μg/m³</div>
              </div>
            </div>
          </div> -->
          <div
            style="z-index: 1001"
            ref="chartRef8"
            class="chart-containers"
          ></div>
        </div>
        <div class="Content-item">
          <h4>空气调节设备</h4>
          <!-- <div class="huanJing-box">
            <div class="huanJing-title-1">中央<br>空调</div>
            <div class="huanJing-title"><img style="width: 35px;height: 35px;" src="/static/空气温度.png" alt="">
            </div>
            <div class="huanJing-content" style="right: -5px; width: 90px;font-size: 12px ;height: 100%;;">
              <div style="color: #51afed;">18 C°</div>
              <div class="capsule">运行</div>
            </div>
          </div>
          <div class="huanJing-box">
            <div class="huanJing-title-1">中央<br>除湿</div>
            <div class="huanJing-title"><img style="width: 35px;height: 35px;" src="/static/空气湿度.png" alt="">
            </div>
            <div class="huanJing-content" style="right: -5px; width: 90px;font-size: 12px; height: 100%; ">
              <div style="color: #edc951;">40 %</div>
              <div class="capsule">运行</div>
            </div>
          </div>
          <div class="huanJing-box">
            <div class="huanJing-title-1">中央<br>除尘</div>
            <div class="huanJing-title"><img style="width: 35px;height: 35px;" src="/static/空气质量.png" alt="">
            </div>
            <div class="huanJing-content" style="right: -5px;width: 90px;font-size: 12px; height: 100%;">
              <div style="color: #ffffff;"> &lt;18000μg/m³</div>
              <div class="capsule">运行</div>
            </div>
          </div> -->
          <div
            style="z-index: 1001"
            ref="chartRef9"
            class="chart-containers"
          ></div>
        </div>
        <div class="Content-item">
          <h4>蓄电池</h4>
          <!-- <div class="huanJing-box">
            <div class="huanJing-title-1">蓄电<br>池组</div>
            <div class="huanJing-title"><img style="width: 35px;height: 35px;" src="/static/蓄电池.png" alt=""></div>
            <div class="huanJing-content" style="font-size: 12px;">
              <div class="progress-container">
                <div class="progress-bar"
                  style="--width: 80%; background: linear-gradient(to right, #0dbc79, #51afed);"></div>
                <div class="progress-percentage">80%</div>
              </div>
            </div>
          </div>
          <div class="huanJing-box">
            <div class="huanJing-title-1">充电<br>设备</div>
            <div class="huanJing-title"><img style="width: 35px;height: 35px;" src="/static/充电设备.png" alt=""></div>
            <div class="huanJing-content" style=" color:#0dbc79;">
              <div class="progress-container">
                <div class="progress-bar"
                  style="--width: 100%; background: linear-gradient(to right, #0dbc79, #0dbc79);"></div>
                <div class="progress-percentage">充电中</div>
              </div>
            </div>
          </div>
          <div class="huanJing-box">
            <div class="huanJing-title-1">电池<br>监控</div>
            <div class="huanJing-title"><img style="width: 35px;height: 35px;" src="/static/电池监控.png" alt=""></div>
            <div class="huanJing-content">
              <div class="progress-container">
                <div class="progress-bar"
                  style="--width: 100%; background: linear-gradient(to right, #0dbc79, #0dbc79);"></div>
                <div class="progress-percentage">26C°</div>
              </div>
            </div>
          </div> -->
          <div
            style="z-index: 1001"
            ref="chartRef10"
            class="chart-containers"
          ></div>
        </div>
      </div>
    </div>
    <div
      class="chart-container"
      @mouseenter="guangDianMouseEnter"
      @mouseleave="guangDianMouseLeave"
    >
      <div class="title">
        <div class="title-h2">
          <h2 style="font-weight: 400">光电缆</h2>
        </div>
      </div>
      <div class="Content" :class="{ 'content-visible': showContentguangDian }">
        <div class="Content-item">
          <h4>光缆</h4>
          <div
            style="z-index: 1003"
            ref="chartRef5"
            class="chart-containers"
          ></div>
        </div>
        <div class="Content-item">
          <h4>强电</h4>
          <div
            style="z-index: 1003"
            ref="chartRef6"
            class="chart-containers"
          ></div>
        </div>
        <div class="Content-item">
          <h4>弱电</h4>
          <div
            style="z-index: 1003"
            ref="chartRef7"
            class="chart-containers"
          ></div>
        </div>
      </div>
    </div>
    <div
      class="chart-container"
      @click="emit('click-lighting')"
      @mouseenter="lightingMouseEnter"
      @mouseleave="lightingMouseLeave"
    >
      <div class="title">
        <div class="title-h2">
          <h2 style="font-weight: 400">照明系统</h2>
        </div>
      </div>
      <div
        class="Content-lighting"
        :class="{ 'content-visible': showContentlighting }"
      >
        <div class="Content-item">
          <div style="z-index: 1001" ref="chartRef1" class="container"></div>
          <div
            style="z-index: 1002"
            ref="chartRef2"
            class="containerArea"
          ></div>
        </div>
      </div>
    </div>
    <div
      class="chart-container"
      @mouseenter="emit('load-MouseEnter')"
      @mouseleave="emit('load-MouseLeave')"
      @click="emit('click-load')"
    >
      <div class="title">
        <div class="title-h2">
          <h2 style="font-weight: 400" @click="emit('click-JianKong')">
            载荷分布
          </h2>
        </div>
      </div>
      <div class="Content"></div>
    </div>
    <div class="chart-container">
      <div class="title">
        <div class="title-h2">
          <h2 style="font-weight: 400" @click="emit('click-xunJian')">
            设备巡检
          </h2>
        </div>
      </div>
      <div class="Content"></div>
    </div>
    <div class="chart-container">
      <div class="title">
        <div class="title-h2">
          <h2 style="font-weight: 400" @click="emit('click-JianKong')">
            监控设备
          </h2>
        </div>
      </div>
      <div class="Content"></div>
    </div>
    <div class="chart-container">
      <div class="title">
        <div class="title-h2">
          <h2 style="font-weight: 400" @click="emit('click-setShowAtom')">
            机房原子拓补
          </h2>
        </div>
      </div>
      <div class="Content"></div>
    </div>
    <!-- <div
      class="chart-container"
      @mouseenter="DataCenterMouseEnter"
      @mouseleave="DataCenterMouseLeave"
    > -->
    <!-- <div class="title">
        <div class="title-h2">
          <h2 style="font-weight: 400">数据中心层级统计表</h2>
        </div>
      </div> -->
    <!-- <div class="Content" :class="{ 'content-visible': showDataCenter }"> -->
    <!-- <DataCenterHierarchyTable :data="hierarchyData" /> -->
    <!-- </div> -->
    <!-- </div> -->
    <div></div>
  </div>
</template>

<script setup>
// import DataCenterHierarchyTable from "./DataCenterHierarchyTable.vue";
// import VerticalCarousel from '../VerticalCarousel.vue';
import { ref, onMounted, onUnmounted, defineEmits } from "vue";
import * as echarts from "echarts";
const emit = defineEmits([
  'click-lighting',
  "click-setShowAtom",
  "click-JianKong",
  "click-monitor",
  "click-load",
  "click-xunJian",
  "lighting-MouseEnter",
  "lighting-MouseLeave",
  "load-MouseEnter",
  "load-MouseLeave",
  "guangDian-MouseEnter",
  "guangDian-MouseLeave",
  "click-equipment",
  "go-handleNodeSelected",
  "handleMouseEnter",
  "handleMouseLeave",
  "click-Computer",
  "dongLi-MouseEnter",
  "dongLi-MouseLeave",
]);
const showContent = ref(false);
const showContentTuo = ref(false);
const showContentguangDian = ref(false);
const showContentlighting = ref(false);
// const showDataCenter = ref(false);
const popupVisible1 = ref(null);
const popupVisible2 = ref(null);
const popupVisible3 = ref(null);
const chartRef1 = ref(null);
const chartRef2 = ref(null);
let myChart01 = null;
let myChart02 = null;
// const hierarchyData = ref([
//   {
//     name: "机房A",
//     type: "机房",
//     uTotal: 42,
//     uUsed: 30,
//     weight: 500,
//     power: 3000,
//     expanded: false,
//     children: [
//       {
//         name: "分区A1",
//         type: "分区",
//         uTotal: 20,
//         uUsed: 15,
//         weight: 200,
//         power: 1500,
//         expanded: false,
//         children: [
//           {
//             name: "机柜A1-1",
//             type: "机柜",
//             uTotal: 5,
//             uUsed: 3,
//             weight: 50,
//             power: 300,
//           },
//           {
//             name: "机柜A1-2",
//             type: "机柜",
//             uTotal: 5,
//             uUsed: 2,
//             weight: 50,
//             power: 200,
//           },
//         ],
//       },
//       {
//         name: "分区A2",
//         type: "分区",
//         uTotal: 22,
//         uUsed: 10,
//         weight: 300,
//         power: 1500,
//         expanded: false,
//         children: [
//           {
//             name: "机柜A2-1",
//             type: "机柜",
//             uTotal: 5,
//             uUsed: 4,
//             weight: 60,
//             power: 400,
//           },
//           {
//             name: "机柜A2-2",
//             type: "机柜",
//             uTotal: 5,
//             uUsed: 1,
//             weight: 60,
//             power: 100,
//           },
//         ],
//       },
//     ],
//   },
// ]);

// 显示对应弹框
function togglePopup(type, num) {
  if (num == 1) {
    popupVisible1.value = popupVisible1.value === type ? null : type;
    popupVisible2.value = null;
    popupVisible3.value = null;
  } else if (num == 2) {
    popupVisible1.value = null;
    popupVisible2.value = popupVisible2.value === type ? null : type;
    popupVisible3.value = null;
  } else if (num == 3) {
    popupVisible1.value = null;
    popupVisible2.value = null;
    popupVisible3.value = popupVisible3.value === type ? null : type;
  }
}

//条形ui
const chartRefo = ref(null);
const chartReft = ref(null);
const chartRefth = ref(null);
let myChart1 = null;
let myChart2 = null;
let myChart3 = null;
const chartRef5 = ref(null);
const chartRef6 = ref(null);
const chartRef7 = ref(null);
let myChart05 = null;
let myChart06 = null;
let myChart07 = null;
const chartRef8 = ref(null);
const chartRef9 = ref(null);
const chartRef10 = ref(null);
let myChart08 = null;
let myChart09 = null;
let myChart010 = null;

// const option3 = {
const tooltip = {
  show: false,
  trigger: "item",
};
const legend = {
  itemWidth: 5,
  itemHeight: 5,
  top: 5,
  size: 5,
  textStyle: {
    color: "#fff",
    fontSize: 11,
  },
};
const series = [
  {
    name: "Access From",
    type: "pie",
    radius: ["50%", "40%"],
    avoidLabelOverlap: false,
    label: {
      show: false,
      position: "center",
    },
    labelLine: {
      show: false,
    },
    data: [
      { value: 42, name: "正常运行", itemStyle: { color: "#91CC75" } },
      { value: 14, name: "正常待机", itemStyle: { color: "#5470C6" } },
      { value: 40, name: "需要维护", itemStyle: { color: "#edef51" } },
      { value: 4, name: "需要维修", itemStyle: { color: "#d21414" } },
    ],
  },
];

function comMouseEnter() {
  showContent.value = true;
  emit("handleMouseEnter");
}
// 隐藏弹框
function hideContent() {
  emit("handleMouseLeave");
  showContent.value = false;
  popupVisible1.value = null;
  popupVisible2.value = null;
  popupVisible3.value = null;
}

function dongLiMouseEnter() {
  showContentTuo.value = true;
  emit("dongLi-MouseEnter");
}
// 隐藏弹框
function dongLiMouseLeave() {
  emit("dongLi-MouseLeave");
  showContentTuo.value = false;
}
function guangDianMouseEnter() {
  showContentguangDian.value = true;
  emit("guangDian-MouseEnter");
}
// 隐藏弹框
function guangDianMouseLeave() {
  emit("guangDian-MouseLeave");
  showContentguangDian.value = false;
}

function lightingMouseEnter() {
  showContentlighting.value = true;
  emit("lighting-MouseEnter");
}
// 隐藏弹框
function lightingMouseLeave() {
  emit("lighting-MouseLeave");
  showContentlighting.value = false;
}
// function DataCenterMouseEnter() {
//   showDataCenter.value = true;
// }
// // 隐藏弹框
// function DataCenterMouseLeave() {
//   showDataCenter.value = false;
// }
// };
const optionxxx = {
  // backgroundColor: '#1e44879f',
  tooltip: {
    show: false,
    trigger: "item",
  },
  legend: {
    itemWidth: 10,
    itemHeight: 10,
    orient: "vertical",
    left: 0,
    top: "16%",
    // size: 10,
    textStyle: {
      color: "#fff",
      fontSize: 15,
    },
  },
  series: [
    {
      name: "详细数据",
      type: "pie",
      radius: ["70%", "50%"],
      // avoidLabelOverlap: true,
      right: "-30%",
      label: {
        show: true,
        formatter: "{d}%",
        textStyle: {
          color: "#fff",
          fontSize: 15,
        },
      },
      emphasis: {
        focus: "self",
        label: {
          show: true,
          fontSize: 10,
          fontWeight: "bold",
          color: "#fff",
        },
      },
      data: [
        { value: 42, name: "正常运行", itemStyle: { color: "#91CC75" } },
        { value: 14, name: "正常待机", itemStyle: { color: "#5470C6" } },
        { value: 40, name: "需要维护", itemStyle: { color: "#edef51" } },
        { value: 4, name: "需要维修", itemStyle: { color: "#d21414" } },
      ],
    },
  ],
};
const option2xxx = {
  // backgroundColor: '#1e44879f',
  color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
  title: {
    text: "实时能耗",
    top: "5%",
    left: "5%",
    textStyle: {
      fontSize: 20,
      color: "#fff",
      fontWeight: 400,
    },
  },
  tooltip: {
    show: false,
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  grid: {
    left: "-20%",
    right: "4%",
    bottom: 0,
    top: "25%",
    containLabel: true,
  },
  xAxis: [
    {
      show: false,
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
  ],
  yAxis: [
    {
      show: false,
      type: "value",
    },
  ],
  series: [
    {
      name: "Line 1",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(128, 255, 165)",
          },
          {
            offset: 1,
            color: "rgb(1, 191, 236)",
          },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      data: [140, 232, 101, 264, 90, 340, 250],
    },
    {
      name: "Line 2",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(0, 221, 255)",
          },
          {
            offset: 1,
            color: "rgb(77, 119, 255)",
          },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      data: [120, 282, 111, 234, 220, 340, 310],
    },
    {
      name: "Line 3",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(55, 162, 255)",
          },
          {
            offset: 1,
            color: "rgb(116, 21, 219)",
          },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      data: [320, 132, 201, 334, 190, 130, 220],
    },
    {
      name: "Line 4",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(255, 0, 135)",
          },
          {
            offset: 1,
            color: "rgb(135, 0, 157)",
          },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      data: [220, 402, 231, 134, 190, 230, 120],
    },
    {
      name: "Line 5",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      label: {
        show: true,
        position: "top",
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(255, 191, 0)",
          },
          {
            offset: 1,
            color: "rgb(224, 62, 76)",
          },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      data: [220, 302, 181, 234, 210, 290, 150],
    },
  ],
};
onMounted(() => {
  myChart1 = echarts.init(chartRefo.value);
  myChart1.setOption({
    tooltip,
    legend,
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["50%", "40%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 62, name: "正常运行", itemStyle: { color: "#91CC75" } },
          { value: 14, name: "正常待机", itemStyle: { color: "#5470C6" } },
          { value: 10, name: "需要维护", itemStyle: { color: "#edef51" } },
          { value: 24, name: "需要维修", itemStyle: { color: "#d21414" } },
        ],
      },
    ],
  });
  myChart2 = echarts.init(chartReft.value);
  myChart2.setOption({
    tooltip,
    legend,
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["50%", "40%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 70, name: "正常运行", itemStyle: { color: "#91CC75" } },
          { value: 15, name: "正常待机", itemStyle: { color: "#5470C6" } },
          { value: 20, name: "需要维护", itemStyle: { color: "#edef51" } },
          { value: 14, name: "需要维修", itemStyle: { color: "#d21414" } },
        ],
      },
    ],
  });
  myChart3 = echarts.init(chartRefth.value);
  myChart3.setOption({
    tooltip,
    legend,
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["50%", "40%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 90, name: "正常运行", itemStyle: { color: "#91CC75" } },
          { value: 30, name: "正常待机", itemStyle: { color: "#5470C6" } },
          { value: 20, name: "需要维护", itemStyle: { color: "#edef51" } },
          { value: 6, name: "需要维修", itemStyle: { color: "#d21414" } },
        ],
      },
    ],
  });
  myChart05 = echarts.init(chartRef5.value);
  myChart05.setOption({ tooltip, legend, series });
  myChart06 = echarts.init(chartRef6.value);
  myChart06.setOption({ tooltip, legend, series });
  myChart07 = echarts.init(chartRef7.value);
  myChart07.setOption({ tooltip, legend, series });
  myChart08 = echarts.init(chartRef8.value);
  myChart08.setOption({ tooltip, legend, series });
  myChart09 = echarts.init(chartRef9.value);
  myChart09.setOption({ tooltip, legend, series });
  myChart010 = echarts.init(chartRef10.value);
  myChart010.setOption({ tooltip, legend, series });
  myChart02 = echarts.init(chartRef2.value);
  myChart02.setOption(optionxxx);
  myChart01 = echarts.init(chartRef1.value);
  myChart01.setOption(option2xxx);
});

onUnmounted(() => {
  // clearInterval(animationInterval);
  // myChart.dispose();
  // myChart = null;
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
